<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding-left: 0px; padding-right: 0px" v-if="!$route.meta.showNav">
        <el-row style="padding-right: 0px" :gutter="24">
          <el-col style="padding-right: 0px" :span="24">
            <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                :background-color="this.backColor"
            text-color="#333333"
            active-text-color="#FFFFFF"
            @select="handleSelect"
            style="font-family: 'Microsoft YaHei', '宋体', Arial, sans-serif"
            >
            <el-menu-item v-if="this.adminStatus == true">
              <router-link style="font-size: 20px" class="link" to="/projectPage">
                美容护理
              </router-link>
            </el-menu-item>

            <el-menu-item v-if="this.adminStatus == true">
              <router-link style="font-size: 20px" class="link" to="/petPage">
                我的宠物
              </router-link>
            </el-menu-item>

            <el-menu-item v-if="this.adminStatus == true">
              <router-link style="font-size: 20px" class="link" to="/myReservation">
                我的预约
              </router-link>
            </el-menu-item>

            <el-menu-item  v-if="this.adminStatus == false">
              <router-link style="font-size: 20px" class="link" to="/userListAdmin">
                用户管理
              </router-link>
            </el-menu-item>

            <el-menu-item v-if="this.adminStatus == false">
              <router-link style="font-size: 20px" class="link" to="/projectList">
                美容护理项目管理
              </router-link>
            </el-menu-item>

            <el-menu-item v-if="this.adminStatus == false">
              <router-link style="font-size: 20px" class="link" to="/reservation-page">
                用户预约管理
              </router-link>
            </el-menu-item>

            <el-menu-item v-if="this.adminStatus == true">
              <router-link style="font-size: 20px" class="link" to="/userInfo">
                个人信息
              </router-link>
            </el-menu-item>

            <el-menu-item>
              <router-link style="font-size: 20px" class="link" to="/userLogin">
                退出登录
              </router-link>
            </el-menu-item>

            <el-menu-item @click="this.admin()" v-if="this.adminStatus == true">
              <p style="font-size: 20px">后台页面</p>
            </el-menu-item>

            <el-menu-item @click="this.user()" v-if="this.adminStatus == false">
              <p style="font-size: 20px">前台页面</p>
            </el-menu-item>

            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <router-view style="width: 100%; height: 100%"></router-view>
    </el-container>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "IndexPage",
  data(){
    return{
      backColor: '#FAF0E6',
      adminStatus: true,
      activeIndex:'1',
      activeIndex2:'1',
      showConditions:{
        loginCondition: true,
        userInfoCondition: false,
        logoutCondition: false,
        adminCondition: true,
      },
      status:{
        admin: false,
        user: true
      }
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    isAdmin(){
      return true;
    },
    admin(){
      axios.get("http://localhost:8088/user/set/false",{withCredentials:true})
          .then(res => {
            console.log(res)
            window.location.href = "/adminLogin"
          })
    },
    user(){
      axios.get("http://localhost:8088/user/set/true",{withCredentials:true})
          .then(res => {
            console.log(res)
            window.location.href = "/userLogin"
          })
    }
  },
  mounted() {
    axios.get("http://localhost:8088/user/status",{withCredentials:true})
        .then(res => {
          console.log(res)
          this.adminStatus = res.data.data;
          if (!res.data.data){
            this.backColor = '#87CEEB'
          }
        })
    let adminStatus = this.isAdmin();
    if (adminStatus){
      this.adminStatus = true;
    }
  }
}
</script>

<style>

.common-layout{
  margin-top: 0px;
}
el-row:last-child {
  margin-bottom: 0;
}
el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  height: 70px;
  background-color: rgba(255, 152, 191, 0.99);
}
.logo {
  height: 70px;
}
.link {
  text-decoration: none;
}

</style>